<script lang="ts" setup>
import { departmentListApi } from "@/apis/consult";
import type { DepartData } from "@/types/consult";
import { computed, ref } from "vue";

const list = ref<DepartData[]>([]);

const activeIndex = ref(0);
const getData = async () => {
  const res = await departmentListApi();
  list.value = res;
};
getData();

const childList = computed(() => {
  return list.value[activeIndex.value]?.child;
});

const pageParams = defineProps<{ illnessType: number; type: string }>();
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <template v-for="(item, index) in list" :key="item.id">
        <view
          v-if="item.child.length > 0"
          class="department-item"
          :class="{ active: activeIndex === index }"
          @click="activeIndex = index"
        >
          {{ item.name }}
        </view>
      </template>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        v-for="item in childList"
        :key="item.id"
        hover-class="none"
        :url="`/subpkg_archive/description/index?depId=${item.id}&illnessType=${pageParams.illnessType}&type=${pageParams.type}`"
        class="department-item"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import "./index.scss";
</style>
